<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>业主爱家</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font: 12px 宋体;
	background-image: url(images/bili.jpg);
	background-repeat: no-repeat;
}

img {
	border: 0;
}

.login-top {
	width: 100%;
	height: 16px;
	margin: 147px auto 0;
	/*background: url(images/login_01.gif) no-repeat center 0;*/
}

.login-area {
	width: 100%;
	height: 80px;
	margin: 0 auto;
	/*background: url(images/login_02.gif) no-repeat center 0;*/
}

.login-area form {
	width: 290px;
	margin: 0 auto;
}

.login-area label {
	clear: left;
	float: left;
	width: 60px;
	font: 600 14px 宋体;
}

.login-area  input {
	width: 122px;
	height: 16px;
	border: 1px #767F94 solid;
	font: 12px/16px 宋体;
}
/*
	input.login-sub {
		width: 104px;
		height: 34px;
		border: 0;
		background: url(images/QQ.jpg) no-repeat 0px 1px; *
		margin-top: 5px;
	}
	*/

/*
	.login-copyright {
		width: 100%;
		height: 30px;
		margin: 18px auto 0;
		background: url(images/copyright.gif) no-repeat center 0;
	}
	*/
</style>
<link href="css/index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	function changeValidateCode(obj) {
		//获取当前的时间作为参数，无具体意义 
		var timenow = new Date().getTime();
		//每次请求需要一个不同的参数，否则可能会返回同样的验证码
		//这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。 
		obj.src = "random.action?d=" + timenow;
	}
	function check() {
		var msg = document.getElementById("msg").value;
		if (msg.length != 0) {
			alert(msg);
			document.getElementById("msg").value = "";
		}
	}

	
	
	function checks() {

		var password = document.getElementById("password");
		var password1 = document.getElementById("password1");
		if (password.value != password1.value) {
			$("#information2").html("密码不一致!");
			return false;
		}else if(password.value == password1.value){
			$("#information2").html("");
		}
		var city = document.getElementById("city");
		var district = document.getElementById("district");
		if (city.value == "" || district.value == "") {
			$("#information3").html("必选")
			return false;
		}else if(city.value != "" && district.value != ""){
			$("#information3").html("")
		}
		
		return true;
	}
</script>
</head>
<body onload="check()">
	<div class="login-top"></div>
	<div class="login-area">
		<form action="register"
			style="padding: 50px; border: 0.5px black solid; background: rgba(0, 0, 0, .2);"
			id="myform">
			<p style="font-size: 20px; color: white;">管理员注册REGISTER</p>
			<table class="register" style="color: white;">
				<tr>
					<td>用户名:</td>
					<td><input type="text" name="nickName" id="nickName"
						placeholder="请输入用户名" required="required"
						pattern="^[a-zA-Z0-9_\u4e00-\u9fa5]+$" /><br />
					<span id="information"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"
						placeholder="请输入6-18位数字和字母组成密码" required="required"
						pattern="[A-Z0-9]{5,18}$" /><span id="information1"></span></td>
				</tr>
				<tr>
					<td>重复密码:</td>
					<td><input type="password" name="Password1" id="password1"
						placeholder="请输入密码" required="required" pattern="[A-Z0-9]{5,18}$" /><br />
					<span id="information2"></span></td>
				</tr>
				<tr>
					<td><select name="city" id="city">
							<option value="">__市__</option>
							<option value="北京市">北京市</option>
					</select></td>
					<td><select name="district" id="district" >
							<option value="">__区__</option>
							<option value="东城区">东城区</option>
							<option value="西城区">西城区</option>
							<option value="崇文区">崇文区</option>
							<option value="玄武区">玄武区</option>
					</select><span id="information3"></span></td>
				</tr>
				<tr>
					<td>小区名:</td>
					<td><input type="text" name="villageName" id="villageName"
						placeholder="请输入小区名" required="required"
						pattern="^[a-zA-Z0-9_\u4e00-\u9fa5]+$" /><span id="information4"></span></td>
				</tr>
				<tr>
					<td>物管电话:</td>
					<td><input type="text" name="managePhone" id="managePhone"
						placeholder="请输入物管电话" required="required" pattern="[A-Z0-9]{11}$" /><span
						id="information5"></span></td>
				</tr>
				<tr>
					<td>安保电话:</td>
					<td><input type="text" name="safePhone" id="safePhone"
						placeholder="请输入安保电话" required="required" pattern="[A-Z0-9]{11}$" /><span
						id="information6"></span></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" name="email" id="email"
						placeholder="请输入email" required="required"
						pattern="^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$" /><span
						id="information7"></span></td>
				</tr>
			</table>
			<a href="showlogin"
				style="padding: 1.8px 10px; background-color: white;">返回登录</a> <input
				type="submit" value="提交" onclick="checks()" />
		</form>
	</div>
	<div class="login-copyright"></div>
</body>
</html>